<template>
  <div class="page-container" id="page-container" ref="pageContainerRef">
    <div
      class="move-box"
      id="move-box"
      ref="moveBoxRef"
      @mousedown="handleMoveDown($event)"
      @mousemove="handleMove($event)"
      @mouseup="handleMoveUp"
      @mouseleave="handleMoveUp"
    ></div>
  </div>
</template>

<script setup>
import { ref } from "vue";
const moveBoxRef = ref(null);

const isDown = ref(false);
let x = 0;
let y = 0;

const handleMoveDown = (event) => {
  isDown.value = true;
  console.log('down')
  console.log(event);
  x = event.pageX - moveBoxRef.value.offsetLeft;
  y = event.pageY - moveBoxRef.value.offsetTop;
  console.log('x,y', x, y);
  console.log('pageX', event.pageX);
  console.log('pageY', event.pageY);
  console.log('offsetLeft', moveBoxRef.value.offsetLeft);
  console.log('offsetTop', moveBoxRef.value.offsetTop);
};

const handleMoveUp = (event) => {
  isDown.value = false;
  console.log('up', isDown.value);
}

const handleMove = (event) => {
  if (!isDown.value) return;
  console.log(event);
  console.log(isDown.value);
  moveBoxRef.value.style.left = event.pageX - x + 'px';
  moveBoxRef.value.style.top = event.pageY - y + 'px';
};
</script>

<style lang="less" scoped>
.page-container {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  position: relative;
  overflow: hidden;

  .move-box {
    position: absolute;
    left: 0;
    top: 0;
    width: 100px;
    height: 100px;
    background-color: skyblue;
    border-radius: 50%;
    cursor: pointer;
  }
}
</style>
